import { useEffect, useState, useLayoutEffect } from "react"

function Demo () {
  const [count, setCount] = useState(0)
  console.log('render'); 

  useLayoutEffect(() => {
    /**
     * useLayoutEffect 在DOM渲染完毕之前调用，当运算量较大时，此hook会发生阻塞，不建议使用
     * */ 
    // debugger
    console.log('useLayoutEffect mount') 
    return () => console.log('useLayoutEffect unmount')
  }, [])

  useEffect(() => {
    let timer = setInterval(() => {
      // setCount(count => count+1)  // 每次基于最新的值
      setCount(count + 1)
      // debugger
      console.log('useEffect mount')
    }, 1000)
    return () => {
      clearInterval(timer)
      console.log('useEffect unmount')
    }
  }, [])

  return <div>{count}</div>
}

export default Demo 